<template>
   <div>
      <!-- 卡片框 -->
      <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home_Ad' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>场地管理</el-breadcrumb-item>
      </el-breadcrumb>
        <!-- 搜索框 -->
        <div class="searchBox">
             <!-- 添加按钮 -->
            <div class="addUserBox">
                <el-button v-if="selectedId !== ''"  type="success" icon="el-icon-circle-plus-outline" @click="showAddCourtDialog">添加场地</el-button>
            </div>
             <!-- 选择器区域 -->
                <div class="selectLeft">选择球馆</div>
         <el-select v-model="selectedId" placeholder="请选择" filterable  @change="selectChange(selectedId)">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
         
        </div>
       
         <!-- 添加场地对话框 -->
            <el-dialog width="600px" title="添加场地" :visible.sync="isShowAddCourt">
             <el-form ref="addCourtFormRef"  label-width="90px" :model="addCourtForm" :rules="addRules">
                <el-form-item label="场地名称" prop="cname">
                    <el-input v-model="addCourtForm.cname"></el-input>
                </el-form-item>
                <el-form-item label="价格/时" label-width="90px" prop="price">
                    <el-input v-model="addCourtForm.price" class="priceInput"></el-input>
                </el-form-item>
                <el-form-item label="场地状态:">
                    <el-switch
                        style="display: block"
                        v-model="addCourtForm.state"
                        inactive-color="#13ce66"
                        active-color="#ff4949"
                        active-text="关闭"
                        active-value="0"
                        inactive-value="1"
                        inactive-text="开放">
                    </el-switch>
                </el-form-item>
                 <el-form-item label="开放时间段" label-width="100px" prop="startTime">
                       <el-time-select
                            placeholder="起始时间"
                            v-model="addCourtForm.startTime"
                            :picker-options="{
                            start: '08:00',
                            step: '01:00',
                            end: '20:00'
                            }">
                        </el-time-select>
                       
                </el-form-item>
                <el-form-item label="开放时间段" label-width="100px" prop="endTime">
                     <el-time-select
                            placeholder="结束时间"
                            v-model="addCourtForm.endTime"
                            :picker-options="{
                            start: '08:00',
                            step: '01:00',
                            end: '20:00',
                            minTime:addCourtForm.startTime
                            }">
                        </el-time-select>
                </el-form-item>
             
                 <el-form-item class="formBtnBox"> 
                    <el-button type="primary" @click="addCourt">点击添加</el-button>
                    <el-button  @click="closeAddbox">取消</el-button>
                </el-form-item>
                
             </el-form>
        
        </el-dialog>
         <!-- 编辑场地对话框 -->
          <el-dialog width="600px" title="编辑场地" :visible.sync="isShowEditCourt">
             <el-form ref="editCourtFormRef"  label-width="90px" :model="editCourtForm" :rules="addRules">
                <el-form-item label="场地名称" prop="cname">
                    <el-input v-model="editCourtForm.cname"></el-input>
                </el-form-item>
                <el-form-item label="价格/时" label-width="90px" prop="price">
                    <el-input v-model="editCourtForm.price" class="priceInput"></el-input>
                </el-form-item>
                <el-form-item label="场地状态:">
                    <el-switch
                        style="display: block"
                        v-model="editCourtForm.state"
                        inactive-color="#13ce66"
                        active-color="#ff4949"
                        active-text="关闭"
                        :active-value="0"
                        :inactive-value="1"
                        inactive-text="开放">
                    </el-switch>
                </el-form-item>
                 <el-form-item label="开放时间段" label-width="100px" prop="startTime">
                       <el-time-select
                            placeholder="起始时间"
                            v-model="editCourtForm.startTime"
                            :picker-options="{
                            start: '08:00',
                            step: '01:00',
                            end: '20:00'
                            }">
                        </el-time-select>
                       
                </el-form-item>
                <el-form-item label="开放时间段" label-width="100px" prop="endTime">
                     <el-time-select
                            placeholder="结束时间"
                            v-model="editCourtForm.endTime"
                            :picker-options="{
                            start: '08:00',
                            step: '01:00',
                            end: '20:00',
                            minTime:editCourtForm.startTime
                            }">
                        </el-time-select>
                </el-form-item>
             
                 <el-form-item class="formBtnBox"> 
                    <el-button type="primary" @click="editCourt">保存编辑</el-button>
                    <el-button  @click="closeAddbox">取消</el-button>
                </el-form-item>
                
             </el-form>
        </el-dialog>
        <!-- 表格区域 -->
           <el-table
            :data="courtList"
            border stripe fit
            empty-text='null'
            class="userTable"
            style="width: 100%;margin-top:12px">
            <el-table-column type="index" label="#" width="30"></el-table-column>
            <el-table-column prop="cid" label="场地编号" width="100"></el-table-column>
            <el-table-column prop="cname" label="场地名称" width="200">
            </el-table-column>
            <el-table-column prop="sname" label="所属球馆" width="200">
            </el-table-column>
            <el-table-column prop="price"  label="价格/小时" width="100">
            </el-table-column>
              <el-table-column prop="price"  label="开放时间" width="160">
                <template slot-scope="scope">
                        <el-tag type="success">{{scope.row.startTime==""?'暂无':scope.row.startTime}}</el-tag>
                        —
                        <el-tag  type="warning">{{scope.row.endTime==""?'暂无':scope.row.endTime}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="场地状态" width="150">
                <template slot-scope="scope">
                        <el-tag v-if="scope.row.state == 1" type="success">开放</el-tag>
                        <el-tag v-else type="danger">关闭</el-tag>
                </template>
            </el-table-column>
             <el-table-column  label="操作" width="">
                 <template slot-scope="scope">
                         <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCourtDialog(scope.row)">编辑</el-button>
                         <el-button type="danger"  icon="el-icon-delete" size="mini" @click="deleteCourt(scope.row)">删除</el-button>   
                 </template>
            </el-table-column>  
            

           </el-table>
      </el-card>
   </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
import Api from '../../api'
export default {
    data() {
        return {
        //球馆信息列表
          stadiumList:[],
        // 添加场地对话框
          isShowAddCourt:false,
          isShowEditCourt:false,
        // 添加场地表单
          addCourtForm:{
              cname:'',
              sid:'',
              price:'',
              state:1,
              startTime:'',
              endTime:''
              
          },
          editCourtForm:{
              cid:'',
              cname:'',
              price:'',
              state:'',
              startTime:'',
              endTime:''
          },
             options:[],
             selectedId:'',
             query:'',
             courtList:[],
             addRules:{
                  cname:[{ required: true, message: '场地名称不能为空', trigger: 'blur' }],
                  price:[{ required: true, message: '请输入价格', trigger: 'blur' }],
                  startTime:[{ required: true, message: '请设置开放时间', trigger: 'blur' }],
                  endTime:[{ required: true, message: '请设置结束时间', trigger: 'blur' }],
             }

          }
    },
    computed:{
        ...mapState({
            courtListData:state => state.court.courtList,
            stadiumListData:state => state.stadium.stadiumListData,
        }),
        ...mapGetters({stadiumDataById:'stadiumListDataById'})
 

    },
    created() { 
        this.getCourtData();
        this.$store.dispatch('getStadiumDataById').then(ok=>{
            if(ok) {
                this.stadiumList = this.stadiumDataById;
                this.selectLoading();

            }
        },err=>{
            console.log(err);
        });
      

    },
    methods: {
       async getCourtData(){
             this.$store.dispatch('getCourtData').then(ok =>{
                 console.log(ok);
                 this.courtList = this.courtListData;
                 this.selectChange(this.selectedId);
             },err=>{
                 console.log(err);
             })
           
        },
        // 加载下拉框的数据
        selectLoading(){
            if(this.stadiumList != []){
               
                this.stadiumList.forEach(element => {
                    let option = {value:'',label:''};
                    option.value = element.sid;
                    option.label = element.sname;
                    this.options.push(option);

                });
                this.selectedId = this.options[0].value;
             
            }else{
                console.log('数据还未获取');
            }
            
        },
        // 下拉框value变化时的回调
        selectChange(sid){
            if(sid){
                this.courtList = this.courtListData.filter(e=>{
                    return e.sid == sid;
                })
            }
        },
        // 添加场地回调
        async addCourt(){
           this.$refs.addCourtFormRef.validate(async valid=>{
                 if(!valid) return;
                 const {data:res} = await Api.addCourt(this.addCourtForm);
                 if(res.status !== 201 ) return this.$message.error('修改失败');
                 this.$message.success('修改已保存');
                 this.getCourtData();
                 this.isShowAddCourt=false;

             })
        },
        // 编辑场地回调
        async editCourt(){
             this.$refs.editCourtFormRef.validate(async valid=>{
                 if(!valid) return;
                 const {data:res} = await Api.editCourt(this.editCourtForm);
                 if(res.status !== 200 ) return this.$message.error('编辑失败');
                 this.$message.success('编辑已保存');
                 this.getCourtData();
                 this.isShowEditCourt=false;
             })
        },
        // 删除场地回调
        async deleteCourt(courtInfo){
             this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            showCancelButton:true,
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                 const {data:res} = await Api.removeCourt(courtInfo.cid);
             if(res.status !== 200 ) return this.$message.error('删除失败');
                 this.$message.success('删除成功');
                this.getCourtData();
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        // 显示添加场地对话框
        showAddCourtDialog(){
           this.isShowAddCourt = true;
           this.addCourtForm.sid = this.selectedId;
           
        },
        // 显示编辑场地对话框
        showEditCourtDialog(courtInfo){
           this.editCourtForm.cid = courtInfo.cid;
           this.editCourtForm.sid = courtInfo.sid;
           this.editCourtForm.cname = courtInfo.cname;
           this.editCourtForm.startTime = courtInfo.startTime;
           this.editCourtForm.endTime = courtInfo.endTime;
           this.editCourtForm.price = courtInfo.price;
           this.editCourtForm.state = courtInfo.state;
           this.isShowEditCourt = true;
        },
        // 关闭对话框
        closeAddbox(){  
            this.isShowAddCourt = false;
            this.isShowEditCourt = false;
        }

    },
    mounted() {
        // 初始化下拉列表
         this.courtList = this.courtListData;
    },

}
</script>

<style scoped lang="less">
    .searchBox{
        margin-top: 20px;
        display: flex;
        
    }
    .selectLeft{
        border-bottom: 1px solid #ddd;
        text-align: center;
        height: 39px;
        width: 80px;
        line-height: 39px;
        font-size: 15px;
        color: rgb(103, 107, 109);
        font-weight: 600;
    }
    .addUserBox{
        margin-right: 50px;
    }
    .priceInput{
        width: 120px;
    }
    .el-switch{
            margin-top: 9px;
    }
    .el-time-select{
        margin-right: 5px;
    }
</style>